<template>
  <div :class="{ disabled: !isSupported }" @click="proceed">
    <svg width="87" height="34" viewBox="0 0 87 34" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M62.0083 25.3572V3H66.5022V25.3572H62.0083Z" fill="#F7A600" />
      <path
        class="letter"
        d="M9.63407 31.9983H0V9.64111H9.24666C13.7406 9.64111 16.3591 12.0903 16.3591 15.9214C16.3591 18.4013 14.6774 20.0039 13.5134 20.5375C14.9028 21.1652 16.6813 22.5779 16.6813 25.5624C16.6813 29.7373 13.7406 31.9983 9.63407 31.9983ZM8.89096 13.5355H4.4939V18.6852H8.89096C10.7981 18.6852 11.8652 17.6488 11.8652 16.1095C11.8652 14.5719 10.7981 13.5355 8.89096 13.5355ZM9.18151 22.6104H4.4939V28.1056H9.18151C11.2189 28.1056 12.1874 26.8503 12.1874 25.3418C12.1874 23.835 11.2171 22.6104 9.18151 22.6104Z"
        fill="#22272f"
      />
      <path
        class="letter"
        d="M30.3882 22.8293V31.9983H25.926V22.8293L19.0073 9.64111H23.8886L28.1888 18.6527L32.4239 9.64111H37.3052L30.3882 22.8293Z"
        fill="#22272f"
      />
      <path
        class="letter"
        d="M50.0457 31.9983H40.4116V9.64111H49.6583C54.1522 9.64111 56.7707 12.0903 56.7707 15.9214C56.7707 18.4013 55.089 20.0039 53.925 20.5375C55.3144 21.1652 57.093 22.5779 57.093 25.5624C57.093 29.7373 54.1522 31.9983 50.0457 31.9983ZM49.3026 13.5355H44.9055V18.6852H49.3026C51.2097 18.6852 52.2768 17.6488 52.2768 16.1095C52.2768 14.5719 51.2097 13.5355 49.3026 13.5355ZM49.5931 22.6104H44.9055V28.1056H49.5931C51.6305 28.1056 52.599 26.8503 52.599 25.3418C52.599 23.835 51.6305 22.6104 49.5931 22.6104Z"
        fill="#22272f"
      />
      <path
        class="letter"
        d="M80.986 13.5355V32H76.4921V13.5355H70.4785V9.64111H86.9996V13.5355H80.986Z"
        fill="#22272f"
      />
    </svg>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { ZkEthereumNetworkName } from "@matterlabs/zksync-nuxt-core/types";

export default Vue.extend({
  name: "ProviderBybit",
  computed: {
    network(): ZkEthereumNetworkName {
      return this.$store.getters["zk-provider/network"];
    },
    isSupported(): boolean {
      return this.network === "mainnet";
    },
  },
  methods: {
    proceed() {
      if (!this.isSupported) {
        this.$emit("providerError", `Provider Bybit is not supported for the “${this.network}” network`);
        return;
      }
      this.$analytics.track("click_on_buy_with_bybit");
      return window.open(`https://www.bybit.com/en_US/fiat/purchase/crypto`, "_blank");
    },
  },
});
</script>

<style lang="scss" scoped>
svg {
  position: relative;
  top: -5%;
  height: 60%;
}
</style>
